import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '状态管理',
      home: new TapBoxA(),
      routes: {
        'ParentWidget': (context)=>ParentWidget(false)
      },
    );
  }
}

/*
_TapboxAState 类:

管理TapboxA的状态。
定义_active：确定盒子的当前颜色的布尔值。
定义_handleTap()函数，该函数在点击该盒子时更新_active，并调用setState()更新UI。
实现widget的所有交互式行为。
 */

class TapBoxA extends StatefulWidget {
  TapBoxA({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _TapBoxAState();
  }
}

class _TapBoxAState extends State<TapBoxA> {
  bool _active = false;

  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(

      ),
      body: new Center(
        child: new GestureDetector(
          onTap: _handleTap,
          child: new Container(
            child: new Center(
              child: new Text(
                _active ? 'Active' : 'Inactive',
                style: new TextStyle(fontSize: 32.0, color: Colors.white),
              ),
            ),
            width: 200,
            height: 200,
            decoration: new BoxDecoration(
              color: _active ? Colors.lightGreen[700] : Colors.grey[600],
            ),
            padding: EdgeInsets.all(30),
            margin: EdgeInsets.all(30),
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.add),
        onPressed: () {
          Navigator.pushNamed(context, 'ParentWidget');
        },
      ),
    );
  }
}

/*
父widget管理子widget的state
对于父widget来说，管理状态并告诉其子widget何时更新通常是比较好的方式。
例如，IconButton是一个图片按钮，但它是一个无状态的widget，因为我们认为父widget需要知道该按钮是否被点击来采取相应的处理。

在以下示例中，TapboxB通过回调将其状态导出到其父项。由于TapboxB不管理任何状态，因此它的父类为StatefulWidget, TapboxB为StatelessWidget。

ParentWidgetState 类:

为TapboxB 管理_active状态.
实现_handleTapboxChanged()，当盒子被点击时调用的方法.
当状态改变时，调用setState()更新UI.
TapboxB 类:

继承StatelessWidget类，因为所有状态都由其父widget处理。
当检测到点击时，它会通知父widget。
 */

//----------------------- ParentWidget -----------------------//

// ParentWidget 为 TapboxB 管理状态

class ParentWidget extends StatefulWidget {
  ParentWidget(this.active): super();

  final bool active;

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _ParentWidgetState();
  }
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  void _handleTapBoxChange(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(

      ),
      body: new TapBoxB(
        active: _active,
        onChanged: _handleTapBoxChange,
      ),
    );
  }

}

//------------------------- TapboxB ----------------------------------

class TapBoxB extends StatelessWidget {
  TapBoxB({Key key, this.active: false, this.onChanged}): super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    onChanged(!active);
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      child: new Center(
        child: new GestureDetector(
          onTap: _handleTap,
          child: new Container(
            child: new Center(
              child: new Text(
                active ? 'Active' : 'Inactive',
                style: TextStyle(fontSize: 32, color: Colors.white),

              ),
            ),
            width: 200,
            height: 200,
            decoration: new BoxDecoration(
              color: active ? Colors.lightGreen[700] : Colors.grey[600],
            ),
          ),
        ),
      ),
    );
  }

}
